<template>
	<view>
		<u-navbar title="资源列表" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<scroll-view class="" :scroll-y="true" :style="'height:' + scrollH+'rpx;'" @scrolltolower="lowerBottom" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<view class="box" v-for="(item, index) in dataList" :key="item.id">
				<view class="line">
					<view class="one">客户名称</view>
					<!-- <u-avatar :src="detailInfo.team_info.image" size='mini' style='margin: 0 40rpx; '></u-avatar> -->
					<view class="two">{{item.customer_nickname}}</view>
				</view>
				<!-- <view class="line">
					<view class="one">客户联系方式</view>
					<view class="two">{{item.customer_contact || '无'}}</view>
				</view> -->
				<view class="line">
					<view class="one">分配人员</view>
					<!-- <u-avatar :src="item.group_leader_image" size='mini' style='margin: 0 40rpx; '></u-avatar> -->
					<view class="two">{{item.content}}</view>
				</view>
				<view class="line">
					<view class="one">资源状态</view>
					<view class="two">{{item.status_text}}</view>
				</view>
				<view class="line" v-if="item.status > 0">
					<view class="one">反馈日期</view>
					<view class="two">{{item.updatetime_text}}</view>
				</view>
				<view class="line" v-if="item.status == 2">
					<view class="one">无效备注</view>
					<view class="two">{{item.feedback}}</view>
				</view>
				<!-- <view class="line">
					<view class="one">{{isValid?'实际有效个数':'备注'}}</view>
					<view class="two">{{isValid?'1':remarks}}</view>
				</view> -->
				<view class="button" @click="resources(item.id)" v-if="item.chance==0&&item.status == 0">反馈</view>
				<view class="button" @click="resources(item.id)" v-if="item.chance==0&&item.status != 0">反馈修改</view>
			</view>
			<view style='margin-top: 200rpx;' v-if="dataList.length==0">
				<no-thing></no-thing>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isValid: false,
				remarks: '备注'.repeat(10), //备注
				page: 1,
				dataList: [],
				scrollH: 0,
				baseUrl: this.$u.http.config.baseUrl,
				triggered: false,
			}
		},
		onLoad() {
			this._freshing = false;
		},
		onShow() {
			this.dataList=[]
			this.initData()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		onPullDownRefresh() {
			this.page++
			this.initData()
		},
		methods: {
			// 反馈跳转
			resources(id) {
				this.$u.route('/packageA/pages/resources/resourcesFormit', {
					id
				})
			},
			initData() {
				let data = {
					limit: 10,
					page: this.page
				}
				this.$u.api.getResourcesList(data).then(res => {
					if (res.code == 1) {
						this.dataList = [...this.dataList,...res.data]
					} else {
						this.$u.toast(res.msg)
					}
					// this.dataList = [...this.dataList, ...res.data]
				})
			},
			onPulling(e) {
				this.triggered = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.page = 1;
				await setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.dataList = []
					this.initData();
				}, 1000);
				uni.showToast({
					title: '刷新成功',
					duration: 1000
				})
			},
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			// 触底加载
			lowerBottom() {
				console.log('加载了')
				this.page++;
				
				console.log(this.page)
				this.initData();
			}
		}
	}
</script>

<style lang="scss">
	.box {
		min-height: 200rpx;
		margin: 20rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.4);
		border-radius: 40rpx;
		padding: 10rpx;
		margin-bottom: 30rpx;

		.line {
			margin: 30rpx 50rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			.one {
				width: 260rpx;
				height: 60rpx;
				// margin-right: 100rpx;
				font-weight: 600;
			}

			.two {
				width: 400rpx;
			}
		}

		.button {
			margin: 10rpx auto;
			height: 70rpx;
			width: 300rpx;
			background-color: #fe466b;
			border-radius: 50rpx;
			text-align: center;
			color: #fff;
			line-height: 70rpx;
		}
	}
</style>
